<script setup lang="ts">
import ProductsM from "./Products.m.vue";
import Products from "./Products.vue";

import kv1 from "@/assets/images/kv-BC4_PRO+.jpg";
import kv2 from "@/assets/images/kv-BC4_PRO.jpg";
import kv3 from "@/assets/images/kv-BC6+.jpg";
import kv4 from "@/assets/images/kv-PT2C.jpg";

import img1 from "@/assets/images/kv-m-BC4_PRO+.png";
import img2 from "@/assets/images/kv-m-BC4_PRO.png";
import img3 from "@/assets/images/kv-m-BC6+.png";
import img4 from "@/assets/images/kv-m-PT2C.png";

const list = [
  {
    href: "https://item.jd.com/100209661777.html",
    src: kv1,
    srcM: img1,
  },
  { src: kv2, srcM: img2, href: "https://item.jd.com/100237274034.html" },
  {
    src: kv3,
    srcM: img3,
    href: "https://item.jd.com/100197695349.html",
  },
  { src: kv4, srcM: img4, href: "https://item.jd.com/10130984455579.html" },
];
</script>

<template>
  <DeviceRender>
    <Products :list="list" />
    <template #mobile>
      <ProductsM :list="list"/>
    </template>
  </DeviceRender>
</template>
